<template>
    <div class="chessboard">
        <el-row class="board-row">
            <!-- 创建 8 行 -->
            <el-col v-for="(row, rowIndex) in boardSize" :key="'row-' + rowIndex" :span="24">
                <el-row>
                    <!-- 每行创建 8 列格子 -->
                    <!-- getCellStyle 是一个方法，用来根据当前行和列的索引计算样式 -->
                    <el-col v-for="(col, colIndex) in boardSize" :key="'col-' + colIndex" :span="3"
                        :style="getCellStyle(rowIndex, colIndex)" class="cell">

                        <!-- getCellContent(rowIndex, colIndex) 是一个方法，用来返回每个格子中应该显示的内容（例如棋子的符号） -->
                        <!-- <div class="cell-content">{{ getCellContent(rowIndex, colIndex) }}</div> -->
                        <div class="cell-content" v-if="isHorsePosition(rowIndex, colIndex)">{{ getCellContent(rowIndex,
                            colIndex) }}
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const boardSize = 8;
//初始化棋盘
const board = [];
for (let i = 0; i < boardSize; i++) {
    board[i] = [];
    for (let j = 0; j < boardSize; j++) {
        board[i][j] = null;
    }
}

// 获取格子的样式，使用行列索引来决定背景色（交替的棋盘样式）
const getCellStyle = (rowIndex, colIndex) => {

    // 交替的背景色
    const isDarkSquare = (rowIndex + colIndex) % 2 === 0;
    return {
        backgroundColor: isDarkSquare ? '#1973C3' : '#A8CAE9', // 深色和浅色交替
        height: '50px',  // 格子的高度
        width: '50px',   // 格子的宽度
    };
}

//根据行和列的索引返回内容
const getCellContent = (rowIndex, colIndex) => {
    // 返回当前格子的内容，可以是布数，或者其他信息
    return board[rowIndex][colIndex];

}


// 检查是否是马的位置
const isHorsePosition = (rowIndex, colIndex) => {
    // 这里可以根据棋盘上的条件来判断是否为骑士的位置
    return board[rowIndex][colIndex] !== 0; // 例如，如果该格子内容不为0，认为是马的位置
}



</script>

<style scoped>
.title {
    text-align: center;
    margin-bottom: 20px;
}

.board-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* 左对齐，避免左右多余的空间 */
    margin: 0;
    /* 去掉任何外部间隔 */
}

.chessboard {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

.cell-content {
    display: inline-block;
}

.chessboard {
    width: 400px;
    height: 400px;
}
</style>